<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="案例库" v-if="1" :border-bottom="false" id="navbarr"></u-navbar>

		<view class="content_box">
			<view class="search-content">
				<u-search
					placeholder="搜索关键词...." 
					v-model="search_model"
					:show-action="false"
					 height="68"
					 bg-color="#f4f4f4"
					 color="#333333"
					 placeholder-color="#A0A0A0"
					 search-icon-color="#A0A0A0"
					 :clearabled="false"
					 @search="searchBind"
				>
				</u-search>
			</view>
			
			<view class="filter-content padding" >
				<view class="flex align-center justify-center f22 margin-bottom-sm" style="color: #999999;" @click="unfoldBind" v-show="!isunfold">
					筛选 <u-icon name="arrow-down-fill" color="#999999" size="14" style="margin-left: 10rpx;"></u-icon>
				</view>
				<view class="filter-list" v-for="(item,index) in filter_list" :key="index" v-show="isunfold">
					<view v-for="(item1,index1) in item.content" :key="index1">
						<view 
						:class="item.filterIndex==index1 ?'filter-item item-active':'filter-item'"
						@click="filterBind(index,index1)"
						>{{item1}}</view>
					</view>
				</view>				
			</view>
			
			<view class="decoration-list">
				<view class="decoration-hall-list">
					<navigator url="./case_details" hover-class="none" class="item" v-for="(item, index) in decoration_list" :key="index">
						<view class="item-img"><image :src="item.img" class="img"></image></view>
						<view class="hidden">{{ item.title }}</view>
						<view class="tips-cont hidden">{{ item.tips }}</view>
						<view class="text-bot-cont flex justify-between">
							<view class="user-detail flex align-center">
								<view class="cu-avatar"><image :src="item.avatar" class="img"></image></view>
								<text class="username hidden">{{ item.username }}</text>
							</view>
							<view class="flex align-center" @click="Collection(index)">
								<i :class="item.iscollect ? 'cuIcon-likefill' : 'cuIcon-like'"></i>
								<text class="sc-text">{{ item.collectNum }}</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			filter_list:[{
				content:['全部','中式','美式','现代','北欧','北欧'],
				filterIndex:0
			},{
				content:['全部','别墅','别墅','别墅','别墅','别墅'],
				filterIndex:0
			},{
				content:['全部','50m²以下','50m²以下','50m²以下','50m²以下'],
				filterIndex:0
			},{
				content:['全部','3万以下','3万以下','3万以下下','3万以下','3万以下'],
				filterIndex:0
			},{
				content:['全部','毛坯房','毛坯房','毛坯房','毛坯房'],
				filterIndex:0
			}],		
			isunfold:false,
			decoration_list: [
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: false,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: false,
					collectNum: 256
				},
				{
					img: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/list.png',
					title: '现代简约低奢风小户型',
					tips: '现代|三居|200m²',
					avatar: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png',
					username: '艾福西西',
					iscollect: true,
					collectNum: 257
				}
			],
		};
	},
	onShow() {},
	onLoad(e) {},
	mounted() {},
	methods: {
		searchBind(e){
			console.log(e)
		},
		filterBind(index,index1){
			this.filter_list[index].filterIndex = index1
		},
		unfoldBind(){
			this.isunfold = !this.isunfold
		},
		Collection(index) {
			this.decoration_list[index].iscollect = !this.decoration_list[index].iscollect;
			this.decoration_list[index].iscollect
				? (this.decoration_list[index].collectNum += 1)
				: (this.decoration_list[index].collectNum -= 1);
		},
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	.search-content{
		padding: 0 22rpx;
		/deep/.u-input{
			font-size: 24rpx !important;
		}
	}
	.filter-content{
		padding-top: 50rpx;
		padding-bottom: 0;
		overflow: hidden;
		background-color: white;
		.filter-list{			
			overflow: hidden;
			margin-bottom: 20rpx;
			.filter-item{
				float: left;
				margin-bottom: 16rpx;
				font-size: 22rpx;
				color: #232323;
				font-family: PingFang SC, PingFang SC-Medium;
				padding: 0 16rpx;
				overflow: hidden;
				height: 48rpx;
				line-height: 48rpx;
				min-width: 104rpx;
				text-align: center;
			}
			.item-active{
				background: #e6e6e6;
				border-radius: 24px;
			}
		}
	}
	.decoration-hall-list {
		padding: 10px 16rpx;
		overflow: hidden;
		.item {
			width: 50%;
			float: left;
			padding: 0 14rpx;
			margin-bottom: 38rpx;
			.item-img {
				height: 240rpx;
				margin-bottom: 20rpx;
				width: 100%;
				border-radius: 10rpx;
				overflow: hidden;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.tips-cont {
				margin-top: 18rpx;
				color: #ffb81e;
				font-size: 24rpx;
			}
			.text-bot-cont {
				.user-detail {
					width: 65%;
				}
				.cu-avatar {
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					border-radius: 50%;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.username {
					font-size: 24rpx;
					color: #999999;
					margin-left: 9rpx;
					width: 80%;
				}
				.sc-text {
					margin-left: 10rpx;
					font-size: 24rpx;
				}
				margin-top: 19rpx;
				.cuIcon-likefill {
					color: red;
				}
			}
		}
	}
}
</style>
